<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <%@include file="style.jsp" %>
    <%@include file="script.jsp" %>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/orderlang/distributor/css/products_report.css"/>
    <title>商品报表</title>
</head>
<body>
<div id="container_1" style="height:100%">
    <div style="position: relative">
        <%@include file="header.jsp" %>
    </div>
    <div id="content" class="clearfix">
        <%@include file="left_menu.jsp" %>
        <!--内容部分-->
        <div class="right-content" style="margin:75px 20px 0 213px;">
            <p class="brand">
                <a>报表</a>><a class="now">销售商品报表</a>
            </p>
            <div class="content">
                <div class="top-block">
                    <div class="date fl">
                        <span class="fl">订单时间</span>
                        <input class="fl" id="datePicker" readonly placeholder="选择日期" onchange="changes()"/>
                    </div>
                    <div class="select-box fl">
                        <div class="fl">
                            <input type="text" readonly class="show" placeholder="客户类型"/>
                            <input type="text" readonly class="hidden"/>
                            <span>▼</span>
                            <ul class="hide">
                                <!-- <li data-id="">不限</li>
                                <li>现金</li>
                                <li>微信转账</li>
                                <li>支付宝</li>
                                <li>挂账</li> -->
                                <c:forEach var="cust" items="${customerTypes}">
                                        	 <li id="id" data-id="${cust.id}">${cust.type}</li>
                                </c:forEach> 
                            </ul>
                        </div>
                    </div>
                    <div class="select-box fl">
                        <div class="fl">
                            <input type="text" readonly class="show" placeholder="选择客户"/>
                            <input type="text" readonly class="hidden"/>
                            <span>▼</span>
                            <ul class="hide">
                                <!-- <li data-id="">不限</li>
                                <li>现金</li>
                                <li>微信转账</li>
                                <li>支付宝</li>
                                <li>挂账</li> -->
                                <c:forEach var="cust" items="${customers}">
                                        	 <li id="id" data-id="${cust.id}">${cust.name}</li>
                                </c:forEach>
                            </ul>
                        </div>
                    </div>
                    <button>确定</button>
                </div>
                <div class="center">
                    <div class="clearfix">
                        <p>
                            <span>订货商品数</span>
                            <span>${productsTotal}个</span>
                        </p>
                        <p>
                            <span>订货金额</span>
                            <span>￥${amountTotal}</span>
                        </p>
                        <p>
                            <span>退货商品数</span>
                            <span>5个</span>
                        </p>
                        <p>
                            <span>退货金额</span>
                            <span>￥100,000.00</span>
                        </p>
                        <p>
                            <span>金额合计</span>
                            <span>￥100,000.00</span>
                        </p>
                    </div>
                    <div class="clearfix">
                        <div class="select-box fl" style="margin-top: 12px;width: 7%;">
                            <div class="fl">
                                <input type="text" readonly class="show" value="订货单"/>
                                <span style="left: 84%">▼</span>
                                <ul class="hide">
                                    <li>订货单</li>
                                    <li>退货单</li>
                                </ul>
                            </div>
                        </div>
                        <div class="type fl">
                            <span>统计方式</span>
                            <label for="by-product" class="status on">
                                <input type="radio" name="state" id="by-product" value=""/>
                                按商品统计
                            </label>
                            <label for="by-type" class="status">
                                <input type="radio" name="state" id="by-type" value=""/>
                                按商品分类统计
                            </label>
                        </div>
                    </div>
                    <div id="chart-block">

                    </div>
                </div>
                <div class="product-list">
                    <table class="order-table">
                        <thead>
                        <tr>
                            <td>商品</td>
                            <td>规格</td>
                            <td>订单数</td>
                            <td>订货商品数</td>
                            <td>订货金额</td>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${orderProductCountDtos}" var="iR">
                        <tr>
                            <td>${iR.name}</td>
                            <td>${iR.spec}</td>
                            <td>${iR.orders}</td>
                            <td>${iR.products}</td>
                            <td>￥${iR.amount}</td>
                        </tr>
						</c:forEach>
                        </tbody>
                    </table>
                    <table class="return-table hide">
                        <thead>
                        <tr>
                            <td>商品</td>
                            <td>规格</td>
                            <td>退单数</td>
                            <td>退货商品数</td>
                            <td>退货金额</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>钢管</td>
                            <td>60*25mm</td>
                            <td>54</td>
                            <td>125</td>
                            <td>￥125,00.00</td>
                        </tr>
                        <tr>
                            <td>钢管</td>
                            <td>60*25mm</td>
                            <td>54</td>
                            <td>125</td>
                            <td>￥125,00.00</td>
                        </tr>
                        <tr>
                            <td>钢管</td>
                            <td>60*25mm</td>
                            <td>54</td>
                            <td>125</td>
                            <td>￥125,00.00</td>
                        </tr>
						<c:forEach items="${orderProductCountDtos}" var="iR">
                        <tr>
                            <td>${iR.name}</td>
                            <td>${iR.spec}</td>
                            <td>${iR.orders}</td>
                            <td>${iR.products}</td>
                            <td>￥${iR.amount}</td>
                        </tr>
						</c:forEach>
                        </tbody>
                    </table>
                    <!-- -----分页----- -->
                    <div class="quotes" style="margin-top: 50px"></div>
                </div>
            </div>
        </div>
        <script src="${pageContext.request.contextPath}/static/orderlang/distributor/js/products_report.js"></script>
        <!--内容部分结束-->
    </div>
</div>

</body>
</html>